<template>
    <div class="page_root" :key="queryUpdateFlag" data-page-name="区域管理" data-page-identification="q_4nnrsuusvw">
        <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
            <!-- begin vid_3tq32j6vlg 自定义模板_f7mxf93vex -->
            <div class="tab-body">
                <a-tabs v-model:activeKey="state.activeKey" @change="tabChange" size="large">
                    <a-tab-pane key="基础信息" tab="基础信息" />
                    <a-tab-pane key="年度政策" tab="年度政策" />
                    <a-tab-pane key="人物画像" tab="人物画像" />
                </a-tabs>
                <div class="bottom-btn" v-if="state.activeKey === '基础信息'">

                    <a-button
                        type="primary"
                        v-permission="'3000001147_vid_4pby4s0hkf'"
                        @click="checkBase"
                        :loading="state.baseLoading"
                        >{{ state.baseIsEdit ? '提交基础信息' : '编辑' }}</a-button
                    >
                </div>
                <div class="bottom-btn" v-if="state.activeKey === '年度政策'">

                    <a-button
                        type="primary"
                        v-permission="'3000001147_vid_4pby4s0hkf'"
                        @click="checkYear"
                        :loading="state.yearLoading"
                        >{{ state.yearIsEdit ? '提交年度政策' : '编辑' }}</a-button
                    >
                </div>
                <div class="bottom-btn" v-if="state.activeKey === '人物画像'">
                    <a-button type="primary" @click="jumpPeople(null, state.detailId, 'area', 'add')"
                        >新建角色</a-button
                    >
                </div>
            </div>
            <div class="body">
                <div class="content" v-if="state.activeKey === '基础信息'">
                    <div class="main">
                        <a-form :model="state.yearData" ref="baseRef" v-if="state.baseIsEdit">
                            <a-row :gutter="24">
                                <a-col :span="4">
                                    <a-form-item
                                        :labelCol="{ span: 7 }"
                                        :wrapperCol="{ span: 17 }"
                                        label="区域名称"
                                        :rules="[
                                            { required: true, message: '请选择区域名称', trigger: ['blur', 'change'] }
                                        ]"
                                        name="areaCode"
                                    >
                                        <a-select
                                            allow-clear
                                            show-search
                                            v-model:value="state.yearData.areaCode"
                                            :options="state.areaNameList"
                                            placeholder="请选择"
                                            :filterOption="
                                                (input, option) => {
                                                    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                            :getPopupContainer="getPopupContainer"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="4">
                                    <a-form-item
                                        label="客成经理"
                                        :rules="[
                                            { required: true, message: '请选择客成经理', trigger: ['blur', 'change'] }
                                        ]"
                                        name="customerManager"
                                        :labelCol="{ span: 7 }"
                                        :wrapperCol="{ span: 17 }"
                                    >
                                        <a-select
                                            :options="state.allUser"
                                            show-search
                                            :filter-option="
                                                (input, option) => {
                                                    return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                            :field-names="{ label: 'name', value: 'name' }"
                                            :placeholder="selectHolder"
                                            v-model:value="state.yearData.customerManager"
                                        />
                                    </a-form-item>
                                </a-col>
                            </a-row>
                        </a-form>
                        <div v-else class="base-msg">
                            <div>
                                <span class="light-font">区域名称：</span>
                                <span class="deep-font">{{ state.yearData.areaName }}</span>
                            </div>
                            <div>
                                <span class="light-font">客成经理：</span>
                                <span class="deep-font">{{ state.yearData.customerManager }}</span>
                            </div>
                        </div>
                        <div
                            class="base-table"
                            :style="{
                                marginTop: state.baseIsEdit ? '0' : '16px'
                            }"
                        >
                            <a-table
                                bordered
                                :columns="baseColumns"
                                :data-source="state.yearData.factoryList"
                                :pagination="false"
                            />
                        </div>
                    </div>
                </div>
                <div class="content" v-if="state.activeKey === '年度政策'">
                    <div class="main year-main">
                        <a-form :model="state.yearData" ref="yearRef">
                            <a-descriptions bordered :column="6" size="small">
                                <!-- 第二行：两项，各占2列 -->
                                <a-descriptions-item label="方案基调" :span="2">
                                    <div
                                        class="item-content"
                                        :title="state.yearData.yearPolicyPolicyTone"
                                        v-if="!state.yearIsEdit"
                                        >{{ state.yearData.yearPolicyPolicyTone }}</div
                                    >
                                    <a-form-item
                                        label=""
                                        v-if="state.yearIsEdit"
                                        :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                        name="yearPolicyPolicyTone"
                                    >
                                        <a-textarea
                                            :placeholder="inputHolder"
                                            v-model:value="state.yearData.yearPolicyPolicyTone"
                                            auto-size
                                        />
                                    </a-form-item>
                                </a-descriptions-item>
                                <a-descriptions-item label="激励机制" :span="2">
                                    <div
                                        class="item-content"
                                        :title="state.yearData.yearPolicyExcitationMechanism"
                                        v-if="!state.yearIsEdit"
                                        >{{ state.yearData.yearPolicyExcitationMechanism }}</div
                                    >
                                    <a-form-item
                                        label=""
                                        v-if="state.yearIsEdit"
                                        :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                        name="yearPolicyExcitationMechanism"
                                    >
                                        <a-textarea
                                            :placeholder="inputHolder"
                                            v-model:value="state.yearData.yearPolicyExcitationMechanism"
                                            auto-size
                                        />
                                    </a-form-item>
                                </a-descriptions-item>
                                <a-descriptions-item label="年度数智化建设预算" :span="2">
                                    <div
                                        class="item-content"
                                        :title="state.yearData.yearPolicyDigitalConstructionBudget"
                                        v-if="!state.yearIsEdit"
                                        >{{ state.yearData.yearPolicyDigitalConstructionBudget }}</div
                                    >
                                    <a-form-item
                                        label=""
                                        v-if="state.yearIsEdit"
                                        :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                        name="yearPolicyDigitalConstructionBudget"
                                    >
                                        <a-textarea
                                            :placeholder="inputHolder"
                                            v-model:value="state.yearData.yearPolicyDigitalConstructionBudget"
                                            auto-size
                                        />
                                    </a-form-item>
                                </a-descriptions-item>
                                <a-descriptions-item label="判断政策导向对于信息化工厂的态度和阻碍" :span="6">
                                    <div
                                        class="item-content boid-font"
                                        :title="state.yearData.yearPolicyImpede"
                                        v-if="!state.yearIsEdit"
                                        >{{ state.yearData.yearPolicyImpede }}</div
                                    >
                                    <a-form-item
                                        label=""
                                        v-if="state.yearIsEdit"
                                        :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                        name="yearPolicyImpede"
                                    >
                                        <a-textarea
                                            :placeholder="inputHolder"
                                            v-model:value="state.yearData.yearPolicyImpede"
                                            auto-size
                                        />
                                    </a-form-item>
                                </a-descriptions-item>
                            </a-descriptions>
                            <!--                            <div class="base-msg deep-font mg8"> 方针基调 </div>-->
                            <!--                            <div class="year-content mg12" v-if="!state.yearIsEdit">-->
                            <!--                                {{ state.yearData.yearPolicyPolicyTone }}-->
                            <!--                            </div>-->
                            <!--                            <a-form-item-->
                            <!--                                label=""-->
                            <!--                                v-if="state.yearIsEdit"-->
                            <!--                                :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"-->
                            <!--                                name="yearPolicyPolicyTone"-->
                            <!--                            >-->
                            <!--                                <a-textarea-->
                            <!--                                    :placeholder="inputHolder"-->
                            <!--                                    v-model:value="state.yearData.yearPolicyPolicyTone"-->
                            <!--                                />-->
                            <!--                            </a-form-item>-->
                            <!--                            <div class="base-msg deep-font mg8"> 激励机制 </div>-->
                            <!--                            <div class="year-content mg12" v-if="!state.yearIsEdit">-->
                            <!--                                {{ state.yearData.yearPolicyExcitationMechanism }}-->
                            <!--                            </div>-->
                            <!--                            <a-form-item-->
                            <!--                                label=""-->
                            <!--                                v-if="state.yearIsEdit"-->
                            <!--                                :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"-->
                            <!--                                name="yearPolicyExcitationMechanism"-->
                            <!--                            >-->
                            <!--                                <a-textarea-->
                            <!--                                    :placeholder="inputHolder"-->
                            <!--                                    v-model:value="state.yearData.yearPolicyExcitationMechanism"-->
                            <!--                                />-->
                            <!--                            </a-form-item>-->
                            <!--                            <div class="base-msg deep-font mg8"> 年度数智化建设预算 </div>-->
                            <!--                            <div class="year-content mg12 year-deep-font" v-if="!state.yearIsEdit">-->
                            <!--                                {{ state.yearData.yearPolicyDigitalConstructionBudget }}</div-->
                            <!--                            >-->
                            <!--                            <a-form-item-->
                            <!--                                label=""-->
                            <!--                                v-if="state.yearIsEdit"-->
                            <!--                                :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"-->
                            <!--                                name="yearPolicyDigitalConstructionBudget"-->
                            <!--                            >-->
                            <!--                                <a-textarea-->
                            <!--                                    :placeholder="inputHolder"-->
                            <!--                                    v-model:value="state.yearData.yearPolicyDigitalConstructionBudget"-->
                            <!--                                />-->
                            <!--                            </a-form-item>-->
                            <!--                            <div class="base-msg deep-font mg8"> 判断政策导向对于信息化企业的态度和阻碍 </div>-->
                            <!--                            <div class="year-content mg12" v-if="!state.yearIsEdit">-->
                            <!--                                {{ state.yearData.yearPolicyImpede }}-->
                            <!--                            </div>-->
                            <!--                            <a-form-item-->
                            <!--                                label=""-->
                            <!--                                v-if="state.yearIsEdit"-->
                            <!--                                :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"-->
                            <!--                                name="yearPolicyImpede"-->
                            <!--                            >-->
                            <!--                                <a-textarea-->
                            <!--                                    :placeholder="inputHolder"-->
                            <!--                                    v-model:value="state.yearData.yearPolicyImpede"-->
                            <!--                                />-->
                            <!--                            </a-form-item>-->
                        </a-form>
                    </div>
                </div>
                <div class="content" v-if="state.activeKey === '人物画像'">
                    <div class="main">
                        <div
                            class="base-table"
                            :style="{
                                marginTop: state.baseIsEdit ? '0' : '16px'
                            }"
                        >
                            <a-table :columns="peopleColumns" :data-source="state.peopleData" :pagination="false">
                                <template #bodyCell="{ column, record, text }">
                                    <template v-if="column.dataIndex === 'opration'">
                                        <a-button
                                            type="link"
                                            @click="jumpPeople(record.id, state.detailId, 'area', 'detail')"
                                            >查看
                                        </a-button>
                                        <a-popconfirm
                                            title="确定删除吗?"
                                            ok-text="确定"
                                            cancel-text="取消"
                                            @confirm="handleDeletePeople(record.id)"
                                            @cancel="cancel"
                                        >
                                            <a-button type="link">删除 </a-button>
                                        </a-popconfirm>
                                    </template>
                                </template>
                            </a-table>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end vid_3tq32j6vlg 自定义模板_f7mxf93vex -->
        </a-spin>
    </div>
</template>
<script setup lang="tsx">
    import {
        h,
        ref,
        reactive,
        toRaw,
        markRaw,
        watch,
        computed,
        onBeforeMount,
        onMounted,
        onBeforeUnmount,
        onUnmounted,
        onActivated,
        onDeactivated
    } from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    const router = useRouter()
    const route = useRoute()
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios'
    import {
        cloneDeep,
        localGet,
        merge,
        getDifferenceArray,
        traversalTreeStructure,
        checkCaseCondition,
        renderStringInTemplate,
        handleBreadcrumbJump,
        throttle,
        permission,
        getComponentParamsValue
    } from '@/utils/index'
    import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is'
    import dayjs from 'dayjs'
    import { getPagePcChartsDataSourceConvert } from '@/utils/chart'
    import { message, notification, Modal } from 'ant-design-vue'
    import {
        propertyFormatByNumber,
        propertyFormatByPercentage,
        propertyFormatByDate,
        parseSubFromDataList
    } from '@/utils/format'
    import colorTheme from '@/design/custom-theme.json'
    /*** PUBLISH_EXEGESIS ***
 import UserTableRecords from '@/model/UserTableRecords';
 import { getAppBaseUrl } from '@/utils/index';
 import { sendToken } from "@/hooks/useIframeToken";
 import { useSystemStore } from "@/store/modules/system";
 const systemStore = useSystemStore();
 *** PUBLISH_EXEGESIS ***/

    // 获取传入的流程ID和组件参数
    const props = defineProps({
        'processInstanceId': {
            type: [String, Number, Boolean],
            default: undefined
        }
    })
    const immediateWatch = (source, callback) => {
        watch(source, callback, { deep: true, immediate: true })
    }

    /* -------------------------- 属性定义 -------------------------- */

    const setTimeOutList = []
    const pageLoading = reactive({
        loading: false,
        tip: undefined
    })
    const authInfo = localGet('app-user-store')

    // 处理校验
    const setSubFormName = (parentInfo, name) => {
        return [parentInfo.parents, parentInfo.cycleIndex, name]
    }

    /* ========================== 属性定义 ========================== */

    /* -------------------------- 元素数据引用 -------------------------- */

    /* ========================== 元素数据引用 ========================== */

    /* -------------------------- 页面数据 -------------------------- */

    /* ========================== 页面数据 ========================== */

    /* -------------------------- 响应 -------------------------- */

    /* ========================== 响应 ========================== */

    /* -------------------------- 函数 -------------------------- */

    /* ========================== 函数 ========================== */

    /* -------------------------- 页面参数 -------------------------- */

    const pageParameter_state = reactive({
        'processInstanceId': props.processInstanceId ?? route.query.processInstanceId,
        'id': undefined
    })

    /* ========================== 页面参数 ========================== */

    /* -------------------------- 组件事件处理方法 -------------------------- */

    // ---------------------------- 组件数据同步 ----------------------------

    // ============================ 组件数据同步 ============================

    /* ========================== 组件事件处理方法 ========================== */

    /* -------------------------- 生命周期 -------------------------- */
    // 用于参数变更后重新执行自定义指令
    const queryUpdateFlag = ref(0)

    const pageParams = [{ 'name': 'id', 'dataType': 'STRING' }]
    let setPageParams = () => {
        pageParams.forEach(param => {
            strategyMap[param.dataType](param, route.query[param.name])
        })
    }
    const strategyMap = {
        STRING: (param, paramValue) => {
            if (typeof paramValue === 'undefined') {
                pageParameter_state[param.name] = undefined
                return
            }
            pageParameter_state[param.name] = paramValue
        },
        BOOLEAN: (param, paramValue) => {
            if (typeof paramValue === 'undefined') {
                pageParameter_state[param.name] = undefined
                return
            }
            if ('true' === (paramValue || '').toLowerCase()) {
                pageParameter_state[param.name] = true
            } else if ('false' === (paramValue || '').toLowerCase()) {
                pageParameter_state[param.name] = false
            } else {
                message.error('参数传入错误！类型不匹配！')
            }
        },
        NUMBER: (param, paramValue) => {
            if (typeof paramValue === 'undefined') {
                pageParameter_state[param.name] = undefined
                return
            }
            if (!isNaN(paramValue)) {
                pageParameter_state[param.name] = Number(paramValue)
            } else {
                message.error('参数传入错误！类型不匹配！')
            }
        },
        ARRAY: (param, paramValue) => {
            if (typeof paramValue === 'undefined') {
                pageParameter_state[param.name] = undefined
                return
            }
            if (isNullOrUnDef(paramValue) || !paramValue || paramValue === 'undefined') {
                pageParameter_state[param.name] = []
            } else if (paramValue.trim().startsWith('[') && paramValue.trim().endsWith(']')) {
                try {
                    pageParameter_state[param.name] = JSON.parse(decodeURI(paramValue))
                } catch (error) {
                    console.error('参数解析失败 ', error)
                    message.error('参数解析失败 ', error)
                }
            } else {
                console.error('参数传入错误！类型不匹配！')
                message.error('参数传入错误！类型不匹配！')
            }
        }
    }
    /*** PUBLISH_EXEGESIS ***
 immediateWatch(
 () => route.query,
 () => {
 setPageParams();
 queryUpdateFlag.value++;

 }
 )
 *** PUBLISH_EXEGESIS ***/
    onMounted(() => {
        setPageParams()
    })

    onUnmounted(() => {
        // 销毁定时器
        setTimeOutList.forEach(({ repeat, timer }) => {
            repeat ? clearInterval(timer) : clearTimeout(timer)
        })
    })

    /* ========================== 生命周期 ========================== */

    /* -------------------------- 数据关联处理 -------------------------- */

    /* -------------------------- 表单数据同步 -------------------------- */
    /* ========================== 表单数据同步 ========================== */

    /* ========================== 数据关联处理 ========================== */

    /* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

    /* ========================== 不同组件自定义的处理逻辑 ========================== */

    // ================================定制化逻辑========================================
    onMounted(() => {
        const urlParams = new URLSearchParams(window.location.search)

        // 获取单个参数
        state.detailId = urlParams?.get('id')
        state.type = urlParams?.get('type')
        if (state.detailId) {
            getBaseData()
            console.log('查看')
        } else {
            console.log('新建')
        }

        getAllUser()
        getAreaList()
    })
    const inputHolder = '请输入(必填)'
    const selectHolder = '请选择(必填)'
    const state = reactive({
        activeKey: '基础信息',
        detailId: undefined,
        type: undefined,
        baseIsEdit: false,
        yearIsEdit: false,
        yearLoading: false,
        baseLoading: false,
        peopleIsEdit: false,
        baseData: {},
        yearData: {},
        peopleData: [],
        areaNameList: [],
        detailData: {},
        allUser: []
    })
    const baseColumns = ref([
        {
            title: '企业全称',
            align: 'center',
            dataIndex: 'factoryName',
            ellipsis: true
        },
        {
            title: '客成经理',
            align: 'center',
            dataIndex: 'customerManager',
            ellipsis: true
        }
    ])
    const peopleColumns = ref([
        {
            title: '姓名',
            align: 'center',
            dataIndex: 'userName',
            ellipsis: true
        },
        {
            title: '职务',
            align: 'center',
            dataIndex: 'userPosition',
            ellipsis: true
        },
        {
            title: '职能与权限',
            align: 'center',
            dataIndex: 'userFunction',
            ellipsis: true
        },
        {
            title: '掌握核心决策人其权限',
            align: 'center',
            dataIndex: 'userCoreDecisionMakers',
            ellipsis: true
        },
        {
            title: '操作',
            align: 'center',
            dataIndex: 'opration',
            ellipsis: true
        }
    ])
    // 区域
    function getAreaList() {
        get('/solution-crm/api/v1/base_data/area').then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            state.areaNameList = data.data.map(item => {
                return {
                    label: item.areaName,
                    value: item.areaCode
                }
            })
        })
    }
    function getBaseData() {
        get(`/solution-crm/api/v1/built-in-system-ppm/customer_area/${state.detailId}`).then(data => {
            state.yearData = data.data
        })
    }
    function getPeopleData() {
        post('/solution-crm/api/v1/built-in-system-ppm/customer_area_user_portrait/search', {
            'orderBy': 'id',
            'distinct': false,
            'conditions': [
                {
                    'field': 'area_id',
                    'operator': 'EQ',
                    'value': state.detailId,
                    'secondValue': {},
                    'valueType': 'NUMBER'
                }
            ],
            'pageNumber': 1,
            'pageSize': 1000
        }).then(data => {
            state.peopleData = data.data
        })
    }
    function tabChange() {
        if (state.activeKey === '人物画像') {
            if (state.type === 'detail') {
                getPeopleData()
            }
        } else {
            if (state.type === 'detail') {
                getBaseData()
            }
        }
    }
    function jumpPeople(id, areaId, source, type) {
        if (!areaId) {
            message.info('请先填写基础信息')
            return
        }
        // window.open(
        //     `${import.meta.env.VITE_PUBLIC_PATH}/page/3000001101?id=${
        //         id ? id : ''
        //     }&areaId=${areaId}&source=${source}&type=${type}`,
        //     '_blank'
        // )
        const isLocal = window.location.host.includes('localhost')
        const targetPageId = '3000001101'
        const query = new URLSearchParams({ id: id || '', areaId, source, type }).toString()
        if (isLocal) {
            console.log('本地环境')
            const url = `${import.meta.env.VITE_PUBLIC_PATH}/page/${targetPageId}?${query}`
            window.open(url, '_blank')
        } else {
            // 提取 pathname，确保最后是 page/数字
            console.log('线上')
            const match = location.pathname.match(/^(.*\/page\/)\d+$/)
            if (match) {
                const basePath = match[1] // e.g., "/app_50000005/allin-app/app_3000000076/page/"
                const url = `${location.origin}${basePath}${targetPageId}?${query}`
                window.open(url, '_blank')
            } else {
                console.error('当前 pathname 格式不符合预期，无法拼接新路径：', location.pathname)
            }
        }
    }
    //     编辑/提交年度政策
    const yearRef = ref(null)
    function checkYear() {
        if (state.yearIsEdit) {
            yearRef.value.validate().then(() => {
                state.yearLoading = true
                const api = state.type === 'add' ? post : put
                api(`/solution-crm/api/v1/built-in-system-ppm/customer_area/${state.detailId ? state.detailId : ''}`, {
                    ...state.yearData,
                    delFlag: 0
                })
                    .then(data => {
                        if (data.code !== 200) {
                            message.error(data.message)
                            return
                        }
                        message.success(data.message)
                        state.yearIsEdit = false
                        if (state.type === 'add') {
                            Object.assign(state.yearData, data.data)
                            state.detailId = data.data.id
                            state.type = 'detail'
                            window.history.replaceState({}, '', `?type=detail&id=${state.detailId}`)
                        } else {
                            getBaseData()
                        }
                    })
                    .finally(() => {
                        state.yearLoading = false
                    })
            })
        } else {
            state.yearIsEdit = true
        }
    }
    const baseRef = ref(null)
    //     提交/编辑基础信息
    function checkBase() {
        if (state.baseIsEdit) {
            baseRef.value.validate().then(() => {
                state.baseLoading = true
                const api = state.type === 'add' ? post : put
                api(`/solution-crm/api/v1/built-in-system-ppm/customer_area/${state.detailId ? state.detailId : ''}`, {
                    ...state.yearData,
                    delFlag: 0
                })
                    .then(data => {
                        if (data.code !== 200) {
                            message.error(data.message)
                            return
                        }
                        message.success(data.message)
                        state.baseIsEdit = false
                        if (state.type === 'add') {
                            Object.assign(state.yearData, data.data)
                            state.detailId = data.data.id
                            state.type = 'detail'
                            window.history.replaceState({}, '', `?type=detail&id=${state.detailId}`)
                        } else {
                            getBaseData()
                        }
                    })
                    .finally(() => {
                        state.baseLoading = false
                    })
            })
        } else {
            state.baseIsEdit = true
        }
    }
    function getAllUser() {
        get('/solution-crm/api/v1/base_data/customer_success_team_member').then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            state.allUser = data.data
        })
    }
    function handleDeletePeople(id) {
        del(`/solution-crm/api/v1/built-in-system-ppm/customer_area_user_portrait/${id}`).then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            message.success(data.message)
            getPeopleData()
        })
    }
</script>
<style lang="less" scoped>
    .page_root {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .page_root :deep(.@{ant-prefix}-spin-nested-loading),
    .page_root :deep(.@{ant-prefix}-spin-container) {
        height: 100%;
    }
    .page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper) {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
    }
    .page_root :deep(.@{ant-prefix}-table) {
        flex: auto;
        overflow: auto;
    }
    .table-moreBtn_down {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100px;
    }

    .table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
        background: #ebf1ff;
    }

    /*  表格树结构样式处理，展开按钮层级增加*/
    :deep(.@{ant-prefix}-table-row-expand-icon) {
        z-index: 1;
    }
    /*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
    :deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 15px !important;
        width: calc(100% - 15px);
    }
    :deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 30px !important;
        width: calc(100% - 30px);
    }
    :deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 45px !important;
        width: calc(100% - 45px);
    }
    :deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 60px !important;
        width: calc(100% - 60px);
    }

    /* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
    :deep(.@{ant-prefix}-transfer-list) {
        height: 100%;
        width: 50%;
    }
    /*样式*/
    .body {
        height: 100%;
        background-color: #fff;
        padding: 24px;
        overflow-y: auto;
    }
    .content {
        display: flex;
        flex-direction: column;
        height: calc(100vh - 200px);
    }

    .main {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .bottom-btn {
        //height: 76px;
        //flex-shrink: 0;
        //display: flex;
        //justify-content: center;
        //align-items: center;
        //border-top: 1px solid #f0f0f0; /* 可选的分隔线 */
        //background-color: #fff; /* 确保按钮不被内容遮挡 */
        //z-index: 10; /* 若上面有浮层可适当加 */
        position: absolute;
        right: 24px;
        top: 50%;
        transform: translateY(-50%);
    }
    .base-msg {
        height: 14px;
        line-height: 14px;
        border-left: 2px solid #3875ff;
        padding-left: 6px;
        display: flex;
        gap: 40px;
    }
    .tip-div {
        height: 14px;
        width: 2px;
        background-color: #3875ff;
    }
    .light-font {
        font-size: 14px;
        color: #595959;
        letter-spacing: 0;
        font-weight: 400;
    }
    .deep-font {
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 600;
    }

    .base-table:deep(.@{ant-prefix}-table-thead) > tr > th {
        background: #f5f8ff;
        color: #262626;
        font-weight: 600;
        padding: 10px 16px;
        border-right: 1px solid #d9d9d9 !important;
        position: relative;
    }
    .base-table :deep(.@{ant-prefix}-table-tbody) tr > td {
        font-size: 14px;
        font-family: arial, helvetica, 'microsoft yahei';
        font-weight: 400;
        color: #262626;
        border-bottom: 1px solid #d9d9d9;
        padding: 8px 16px;
        word-break: break-all;
    }
    :deep(.ant3-form-item-required::before) {
        display: none !important;
    }
    .mg8 {
        margin-bottom: 8px;
    }
    .mg12 {
        margin-bottom: 12px;
    }
    .year-main :deep(.ant3-input) {
        min-height: 64px;
    }
    .year-content {
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 400;
        white-space: pre-line;
    }
    .year-deep-font {
        font-weight: 600;
    }
    .tab-body {
        margin-bottom: 16px;
        background-color: #fff;
        border-radius: 4px;
        padding: 8px 24px 5px 24px;
        position: relative;
    }
    .tab-body :deep(.ant3-tabs-nav) {
        margin-bottom: 0;
    }
    .tab-body :deep(.ant3-tabs-tab) {
        padding: 8px 0;
    }
    .tab-body:deep(.ant3-tabs-top > .ant3-tabs-nav::before) {
        border-bottom: none !important;
    }
    :deep(.ant3-descriptions-item-label) {
        width: 160px;
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 500;
        background: #f5f8ff;
    }
    :deep(.ant3-descriptions-view) {
        border-radius: 4px;
    }
    :deep(.ant3-descriptions-view) {
        table {
            table-layout: fixed !important; /* 固定表格布局 */
            width: 100% !important;
            color: red;
        }
    }
    .year-main :deep(.ant3-row) {
        margin: 0;
    }
    .boid-font {
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 500;
    }
    .item-content {
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 400;
    }
</style>
